<template>
    <div class="singer-info w">
        <div class="dt" v-if="singerInfo != null">
            <img :src="singerInfo.artist.img1v1Url">
            <div class="info">
                <div class="name">{{singerInfo.artist.name}}</div>
                <div class="direction">
                    {{singerInfo.artist.briefDesc}}
                </div>
                <div @click="playSongAll" class="playAll iconfont">
                    <span>&#xe682;</span>
                    播放歌手热门歌曲
                </div>
            </div>
        </div>
        <div class="dd" v-if="singerInfo != null">
            <div class="title">
                <div class="x"></div>
                <div class="s">歌曲</div>
                <div class="al">专辑</div>
                <div class="timer">时间</div>
            </div>
            <div class="list">
                <div
                :key="index"
                :class="(index + 1) % 2 == 0 ? 'dd-style' : ''"
                v-for="(item, index) in singerInfo.hotSongs"
                class="item">
                    <div class="x">{{index + 1}}</div>
                    <div @click="playSong(item.id)" class="s iconfont">
                        <span>&#xe682;</span>
                        {{item.name}}
                    </div>
                    <div @click="jumpAlbumInfo(item.al.id)" class="al">{{item.al.name}}</div>
                    <div class="timer">{{item.dt | songTimer}}</div>
                </div>
            </div>
        </div>
        <div class="album">
            <div class="al-dt">专辑</div>
            <div class="al-dd" v-if="singerAlbum != null">
                <div
                :key="index"
                v-for="(item, index) in singerAlbum"
                class="item">
                    <div class="pic">
                        <div @click="jumpAlbumInfo(item.id)" class="mask">
                            <div class="iconfont">&#xe682;</div>
                        </div>
                        <img :src="item.picUrl">
                    </div>
                    <div @click="jumpAlbumInfo(item.id)" class="name">{{item.name}}</div>
                    <div class="timer">{{item.publishTime |setTimers }}</div>
                </div>
            </div>
        </div>

        <div class="mv">
            <div class="al-dt">MV</div>
            <div class="al-dd" v-if="singerMV != null">
                <div
                :key="index"
                v-for="(item, index) in singerMV" 
                class="item">
                    <div class="pic">
                        <div @click="jumpMVInfo(item.id)" class="mask">
                            <div class="iconfont">&#xe682;</div>
                        </div>
                        <img :src="item.imgurl">
                    </div>
                    <div @click="jumpMVInfo(item.id)" class="name">{{item.name}}</div>
                    <div class="timer iconfont">&#xe609;{{item.publishTime}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 地址参数
            urlParams: '',
            // 歌手信息
            singerInfo: null,
            // 歌手专辑
            singerAlbum: null,
            // 歌手MV
            singerMV: null
        }
    },
    mounted() {
        var params = location.hash.split('/');
        this.urlParams = params[params.length - 1];
        this.getSingerInfo();
        this.getSingerAlbum();
        this.getSingerMV();
    },
    filters: {
        // 时长过滤器
        songTimer(data) {
            let time = new Date(data); 
            return time.toString().split(' ')[4].toString().split('08:')[1];
        },
        setTimers(t) {
            let time = new Date(t);
            return time.getFullYear() + '-' + (time.getMonth() + 1) +  '-' + time.getDate();
        }
    },
    methods: {
        // 获取歌手信息
        async getSingerInfo() {
            let { data: res } = await this.$http.get('/artists', { params: { id: this.urlParams } });
            this.singerInfo = res;
        },
        // 获取歌手专辑
        async getSingerAlbum() {
            let { data: res } = await this.$http.get('/artist/album', { params: { id: this.urlParams } });
            this.singerAlbum = res.hotAlbums;
        },
        // 获取歌手MV
        async getSingerMV() {
            let { data: res } = await this.$http.get('/artist/mv', { params: { id: this.urlParams } });
            this.singerMV = res.mvs;
        },
        // 播放单曲
        playSong(id) {
            this.$emit('playSong', id);
        },
        // 播放全部热门歌曲
        playSongAll() {
            this.$emit('playSongAll', this.singerInfo.hotSongs);
        },
        // 跳转到专辑详情
        jumpAlbumInfo(id) {
            this.$router.push(`/album/info/${id}`);
        },
        // 跳转到MV详情
        jumpMVInfo(id) {
            this.$router.push(`/mv/info/${id}`);
        }
    }
}
</script>

<style lang="less" scoped>
.singer-info {
    padding-top: 40px;
    .dt {
        display: flex;
        .info  {
            flex: 1;
            padding-top: 12px;
            margin-left: 60px;
            .name {
                font-size: 36px;
            }
            .direction {
                margin-top: 30px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 6;
                overflow: hidden;
            }
            .playAll {
                display: inline-block;
                padding: 0 12px;
                background-color: #3ec481;
                height: 36px;
                line-height: 36px;
                color: #fff;
                margin-top: 20px;
                font-size: 14px;
                cursor: pointer;
                border-radius: 6px;
                &:hover {
                    background-color: #37b174;
                }
            }
        }
        img {
            width: 260px;
            height: 260px;
            border-radius: 50%;
        }
    }
    .dd {
        margin-top: 50px;
        .title {
            padding-left: 6px;
            display: flex;
            height: 50px;
            line-height: 50px;
            background-color: #fbfbfd;
            font-size: 14px;
            color: #999;
        }
        .x,
        .s,
        .al,
        .timer {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .x {
            flex: 1;
        }
        .s {
            flex: 4;
        }
        .al {
            flex: 4;
        }
        .timer {
            flex: 4;
        }
        .list {
            .item {
                padding-left: 6px;
                display: flex;
                height: 50px;
                line-height: 50px;
                font-size: 14px;
                .timer,
                .x {
                    color: #999;
                }
                .s,
                .al {
                    cursor: pointer;
                    &:hover {
                        color: #3ec481;
                    }
                }
            }
        }
    }
}
.album,
.mv {
    margin-top: 50px;
    .al-dt {
        font-size: 26px;
    }
    .al-dd {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20px;
        .item {
            width: 18%;
            margin-bottom: 30px;
            .name,
            .tiemr {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .name {
                margin-top: 16px;
                font-size: 14px;
                cursor: pointer;
                &:hover {
                    color: #48c686;
                }
            }
            .timer {
                font-size: 14px;
                color: #999;
                margin-top: 4px;
            }
            .pic {
                position: relative;
                width: 100%;
                height: 220px;
                cursor: pointer;
                &:hover .mask {
                    display: block;
                }
                .mask {
                    display: none;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, .4);
                    &:hover .iconfont {
                        font-size: 50px;
                        opacity: 1;
                    }
                    .iconfont {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 10px;
                        opacity: 0;
                        transition: all .3s;
                        color: #fff;
                        font-weight: 700;
                    }
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            
        }
    }
}

.mv {
    .pic {
        height: 124px!important;
    }
}

.dd-style {
    background-color: #fbfbfd!important;
}
</style>